<template>
     <div class="app-container">
        <!-- 条件查询 -->
               <el-form :inline="true" :model="query" size="mini">
                   <el-form-item label="角色名称：">
                       <el-input v-model.trim="query.name" ></el-input>
                   </el-form-item>
                   <el-form-item>
                       <el-button icon="el-icon-search" type="primary" @click="queryData">查询</el-button>
                       <el-button icon="el-icon-refresh"  @click="reload">重置</el-button>
                       <el-button v-if="!roleIds" icon="el-icon-circle-plus-outline" type="primary" @click="handleAdd" >新增</el-button>

                       <el-table-column v-if="!roleIds" align="center" label="操作" >

                       </el-table-column>

                       <el-button v-if="roleIds" icon="el-icon-circle-plus-outline" type="success" @click="handleUserRole" >设置角色</el-button>
                   </el-form-item>
               </el-form>
<!-- 数据列表 :data 绑定渲染的数据, border 纵向边框 -->
 <el-table :data="list" border highlight-current-row style="width: 100%">
 <!-- type="index"获取索引值，从1开始 ，label显示标题，prop 数据字段名，width列宽 -->
 <el-table-column align="center" type="index" label="序号" width="60"></el-table-column>
 <el-table-column align="center" prop="name" label="角色名称" ></el-table-column>
 <el-table-column align="center" prop="remark" label="备注" ></el-table-column>
 <el-table-column align="center" label="操作" >
 <template slot-scope="scope">
 <el-button @click="handlePermission(scope.row.id)" size="mini" type="success" >分配权限</el-button>
 <el-button @click="handleEdit(scope.row.id)" size="mini">编辑</el-button>
 <el-button @click="handleDelete(scope.row.id)" size="mini" type="danger" >删除</el-button>
 </template>
 </el-table-column>
 </el-table>
 <!-- 分页 -->
 <el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="page.current"
  :page-sizes="[10, 20, 50]"
  :page-size="page.size"
  :total="page.total"
  layout="total, sizes, prev, pager, next, jumper"
  >
 </el-pagination>
  <!-- 新增与编辑组件 -->
  <edit :title="edit.title" :visible="edit.visible"
  :formData="edit.formData" :remoteClose="remoteClose">
  </edit>
  <!-- 设置权限组件 -->
   <permission title="分配权限" :visible="per.visible" :remoteClose="remotePerClose"
   :roleId="per.roleId"/>

 </div>
</template>

<script>
import api from '@/api/role'
import Edit from './edit'
import Permission from './permission' // +++
export default {
  watch: { // 监听 roleIds 变化 +++
  roleIds() {
  this.query = [] // 清空查询框数据
  this.queryData() // 重新获取数据
  }
  },
  components: { Edit, Permission },
 data() {
 return {
 list: [], // 列表数据
 page: { // 分页相关
 total: 0, // 总记录数
 current: 1, // 当前页码
 size: 20, // 每页显示20条数据
  },
 query: {}, // 查询条件
  edit: { // 子组件中引用
   title: '',
   visible: false,
   formData: {}
   },
    per: { // 传递给分配权限子组件 +++
    roleId: null, // 角色
    visible: false // 弹窗
    },
 }
 },
 created() {
 this.fetchData()
  },
 methods: {
 fetchData() {
 api.getList(this.query, this.page.current, this.page.size).then(response => {
 this.list = response.data.records
 this.page.total = response.data.total
 })
 },
 // 勾选用户角色 +++++
  checkedRoles(){
  // 清空上一次的选择
  this.$refs.dataTable.clearSelection()
  if(this.roleIds) {
  // 取出列表中每个角色，与用户角色ids进行匹配，匹配上了则选中
  this.list.forEach(item => {
  // 匹配上了
  if(this.roleIds.indexOf(item.id) !== -1) {
  // 选中，注意在 el-table 加上 ref="dataTable"
  this.$refs.dataTable.toggleRowSelection(item, true)
  }
  })
  }
  },
  // 打开编辑窗口
   handleEdit(id) {
   // 通过Id查询数据
   api.getById(id).then(response => {
   if(response.code === 20000) {
   this.edit.formData = response.data
   }
   //弹出窗口
   this.edit.title = '编辑'
   //弹出窗口
   this.edit.visible = true
   })
   },
  // 删除
   handleDelete(id) {
   this.$confirm('确认删除这条记录吗？', '提示', {
   confirmButtonText: '确定',
   cancelButtonText: '取消',
   type: 'warning'
   }).then(() => {
   // 确认
   api.deleteById(id).then(response => {
   //提示信息
   this.$message({
   type: response.code===20000 ? 'success':'error',
   message: response.message
   })
   // 刷新列表
   this.fetchData()
   })
   }).catch(() => {
   // 取消删除，不理会
   })
   },
   // 当每页显示条数改变后,被触发 , val是最新的每页显示条数
   handleSizeChange(val) {
   this.page.size = val
   this.fetchData()
   },
   // 当页码改变后,被触发 , val 是最新的页面
   handleCurrentChange(val) {
   this.page.current = val
   this.fetchData()
   },
    // 查询
    queryData() {
    // 将页码变为第1页
    this.page.current = 1
    this.fetchData()
    },
    // 重置 or 刷新当前页面
     reload() {
     this.query = {}
     this.fetchData()
     },
     // 触发关闭弹出的新增修改子组件窗口
      remoteClose() {
      this.edit.formData = {}
      this.edit.visible = false
      this.fetchData()
      },
      //打开新增窗口
       handleAdd() {
       this.edit.visible = true
       this.edit.title = '新增'
       },
        // 关闭分配权限弹窗
        remotePerClose() {
        this.per.visible = false
        this.per.roleId = null
        this.fetchData()
        },
         // 打开分配权限窗口
         handlePermission(id) { // +++
         this.per.visible = true
         this.per.roleId = id
         },
 }
}
</script>

<style>
</style>
